<!--这是我们不会要的首页熊猫，把他作为主页的轮播图里面怎么样？-->
<template>
  <el-container>
    <el-header height=10%>
      <blank-top-menu/>
    </el-header>
    <el-main class="homeMain">

      <!--      轮播图-->
      <el-carousel
          class="carousel"
          direction="horizontal"
          :autoplay="true"
          arrow="hover"
          height=100%
      >

        <el-carousel-item style="background-color: #F2F6FC">
          <el-container>
            <el-aside class="page">
              <h3 class="item1-title">树图区块链NFT交易平台</h3>
              <p class="item1-tips">
                基于NFT的数字作品交易平台是一个基于internet的网站,用<br>
                户可以在该平台上对自己的数字作品上链进行存证并将自己作品拆分进行<br>
                出售,可在平台上充值并 完成数字作品的交易,可与不同的用户进行沟<br>
                通交流，可以查看最近NFT与区块链的相关新闻案例，本数字平台方便<br>
                大家的数字作品版权保护与交易,提升用户体验
              </p>
              <p class="slogan" @click="go2login">马上体验</p>
            </el-aside>
            <el-main>
              <el-card class="item1"/>
            </el-main>
          </el-container>
        </el-carousel-item>

        <el-carousel-item class="item2">
          <div>
            <h3 class="item2-title">| 什么是数字藏品</h3>
            <p class="item2-tips">
              开启全新的数字艺术收藏之旅<br>
              每个数字藏品都是独一无二的，且具有不同属性<br>
              这些属性通常存储在元数据中，且铸造后不可篡改<br>
              数字藏品铸造数量可通过公共区块链网络验证，具有可证明性
            </p>
          </div>
        </el-carousel-item>

        <el-carousel-item class="item3">
          <div>
            <h3 class="item3-title">Conflux区块链底层系统 |</h3>
            <p class="item3-tips">
              Conflux是一个国内初创的区块链研发项目<br>
              Conflux 研发的区块链底层系统已经突破交易吞吐量和交易确认时间两项最大的区块链技术瓶颈<br>
              是现有知名海外项目比特币系统数据处理能力的数千倍，以太坊系统数据处理能力的数百倍<br>
              本平台依托Conflux区块链底层系统<br>
              对交易进行实时记录，实现数字版权全生命周期管理<br>
            </p>
          </div>
        </el-carousel-item>
      </el-carousel>

    </el-main>
  </el-container>
</template>

<script>
import blankTopMenu from "@/components/blank-top-menu";

export default {
  name: "HomeFrame",
  components: {blankTopMenu},
  methods: {
    go2login: function () {
      this.$router.push('login')
    }
  }
}
</script>

<style scoped>
.homeMain {
  padding: 0 0 0 0;
}

.carousel {
  padding-bottom: 0;
  margin-bottom: 0;
  height: 100%;
}

el-carousel__container {
  height: 100%;
}

.item1 {
  /*height: 88%;*/
  /*width: 100%;*/
  /*margin: 0px;*/
  /*padding: 0px;*/
  background: url(@/assets/news1.jpg) center;
  background-size: cover;
  /*border-color: white;*/
}

.item2 {
  background: url("@/assets/news2.jpg") center;
  background-size: cover;
}

.page {
  width: 50%;
  position: relative;
}

.slogan {
  font-weight: bolder;
  text-align: center;
  font-size: 50px;
  color: #000000;
  padding: 30px 0;
  position: relative;
  top: 300px;
  left: -20%;
}

.slogan:after {
  position: absolute;
  transition: 0.3s;
  content: "";
  width: 0;
  left: 50%;
  bottom: 22%;
  height: 5px;
  background: black;
}

.slogan:hover {
  cursor: pointer;
}

.slogan:hover:after {
  width: 30%;
  left: 35%;
}

.item2-title {
  left: 3%;
  top: 5%;
  font-weight: 600;
  font-size: 50px;
  color: white;
  position: absolute;
}

.item2-tips {
  left: 4%;
  top: 25%;
  color: white;
  font-weight: 500;
  font-size: 19px;
  position: absolute;
}

.item1-title {
  left: 15%;
  top: 5%;
  font-weight: 600;
  font-size: 50px;
  color: black;
  position: absolute;
}

.item1-tips {
  left: 15%;
  top: 25%;
  color: black;
  font-weight: 200;
  font-size: 19px;
  position: absolute;
}

.item3 {
  text-align: right;
  background: url("@/assets/homeBackground3.jpg") center;
  background-size: contain;
}

.item3-title {
  left: 60%;
  top: -3%;
  font-weight: 600;
  font-size: 50px;
  color: white;
  position: absolute;
}

.item3-tips {
  left: 45%;
  top: 17%;
  color: white;
  font-weight: 500;
  font-size: 19px;
  position: absolute;
}
</style>
